<!-- Recieve a parameter named "selectedProduct" which a product class -->
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:p = "http://primefaces.org/ui" >

   <p:dialog  id = "viewProductDialog" 
              header = "#{res['product.view.header']} " 
              widgetVar = "viewProductDialog" 
              resizable = "false"  
              showEffect = "fade" 
              hideEffect = "explode" 
              modal = "true" 
              position="center"
              appendToBody = "True">  
       
       <p:panel  header="#{res['product.view.title']}">
            <h:panelGrid id="displaySelectRow" columns="2" cellpadding="10" cellspacing="10">  
     
	            <p:graphicImage width="200" height="240" url="/images/product/#{selectedProduct.picture}" />  
	       
	            <h:panelGrid columns = "2" cellpadding = "10">  
		            <h:outputLabel value = "#{res['product.code']}:" />  
		            <h:outputText value = "#{selectedProduct.code}" />  
		  
		            <h:outputLabel value = "#{res['product.short.name']}:" /> 
		            <h:outputText value = "#{selectedProduct.shortName}" />  
		  
		            <h:outputLabel value = "#{res['product.barcode']}:" /> 
		            <h:outputText value = "#{selectedProduct.barCode}" />  
		  
		            <h:outputLabel value = "#{res['product.long.name']}:" /> 
		            <h:outputText value = "#{selectedProduct.longName}" />
		            
		            <h:outputLabel value = "#{res['product.weight']}:" /> 
		            <h:outputText value = "#{selectedProduct.weight}" /> 
  	            </h:panelGrid>  
	       </h:panelGrid>
	      
	       <f:facet name="footer"> 
	            <p:commandButton type="button" 
	                            value="Close" 
	                            icon="ui-icon-close" 
	                            style="margin:10"
	                            onclick="viewProductDialog.hide()" />
	       </f:facet>                              
	   </p:panel>
   </p:dialog>  
</ui:composition>